<template>
  <div class="date-time-group-render" :class="getIndentClass(fieldData.alignment)" :style="{ fontSize: getFontSize() }">
    <!-- 字段名称 -->
    <div v-if="fieldData.fieldName && fieldData.fieldName.trim()" class="field-name">
      <span v-if="fieldData.prefixSymbol && fieldData.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <span class="field-name-text" :class="{ 'bold-text': fieldData.isBold }">
        {{ fieldData.fieldName }}
      </span>
    </div>
    
    <!-- 时间显示区域 -->
    <div class="time-display">
      <span class="date-format">{{ formattedDateString }}</span>
      
      <!-- 后缀 -->
      <span v-if="suffix" class="text-segment">{{ suffix }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  fieldData: {
    type: Object,
    required: true,
    default: () => ({
      fieldName: '',
      dateFormat: 'yyyy-mm-dd hh:mm',
      year: null,
      month: null,
      day: null,
      hour: null,
      minute: null,
      second: null,
      millisecond: null,
      suffix: '',
      alignment: 'left',
      prefixSymbol: '',
      isBold: false
    })
  },
  suffix: {
    type: String,
    default: ''
  }
})

const dateFormatMap = {
  'yyyy-mm-dd': '|___|___|___|___|年|___|___|月|___|___|日',
  'mm-dd': '|___|___|月|___|___|日',
  'yyyy-mm-dd hh:mm': '|___|___|___|___|年|___|___|月|___|___|日 |___|___|时|___|___|分',
  'yyyy-mm-dd hh:mm:ss': '|___|___|___|___|年|___|___|月|___|___|日 |___|___|时|___|___|分|___|___|秒',
  'hh:mm': '|___|___|时|___|___|分',
  'hh:mm:ss': '|___|___|时|___|___|分|___|___|秒',
};

const formattedDateString = computed(() => {
  const { dateFormat } = props.fieldData;
  return dateFormatMap[dateFormat] || '____-__-__ __:__:__';
});

// 获取缩进类
const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取前缀符号
const getPrefixSymbol = () => {
  const symbolMap = {
    'dot_circle': '⏺',
    'star': '✧',
    'pointer': '☞',
    'arrow_curved': '⮚',
    'square': '⯀'
  }
  return symbolMap[props.fieldData.prefixSymbol] || ''
}

// 字体映射
const getFontSize = () => {
  const map = { '小二': '18pt', '小四': '12pt', '五号': '10.5pt', '小五': '9pt' }
  return map[props.fieldData.fontSize] || '10.5pt'
}
</script>

<style lang="scss" scoped>
@import '@/assets/common-styles.scss';

.date-time-group-render {
  font-family: '宋体', SimSun, serif;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-format {
  letter-spacing: 1px;
  font-family: 'Courier New', Courier, monospace;
}
</style>